<template>
  <div v-if="page.length">
    <div class="relative">
      <img
        :src="isMobile ? page[0].img_m : page[0].img"
        class="width-100"
        alt=""
      >
      <div
        class="absolute"
        :style="{ top: `${20/3.75}vw`, left: `${50/3.75}vw` }"
      >
        <div
          class="b"
          :class="isMobile ? 'f28' : 'f40'"
        >
          {{ page[0].t1 }}
        </div>
        <div
          class=""
          :class="isMobile ? 'f18' : 'f32'"
          style="color:#B3B4BC"
        >
          {{ page[0].t2 }}
        </div>
      </div>
    </div>
    <div
      :class="isMobile ? 'ptb40 plr20' : 'm-auto'"
      :style="isMobile ? '' : 'width:1120px;padding:100px 0'"
    >
      <div
        class="bd bb bd-000"
        :class="isMobile ? 'f20 pb20 mb20' : 'f40 pb40 mb40'"
      >
        {{ page[1].t1 }}
      </div>
      <div :class="isMobile ? '' : 'flex justify-between'">
        <div>
          <div
            :class="isMobile ? 'f16' : 'f32'"
            style="font-weight:lighter"
          >
            {{ page[1].t2 }}
          </div>
          <div
            :class="isMobile ? 'f16' : 'f32'"
            style="font-weight:lighter"
          >
            {{ page[1].t3 }}
          </div>
        </div>
        <div :class="isMobile ? 'tc mt50' : ''">
          <img
            :src="site.service[0].img"
            alt=""
            :width="isMobile ? '150px' : '100px'"
          >
          <p class="tc mt40">
            关注官方公众号
          </p>
        </div>
      </div>
    </div>
    <img
      :src="page[1].img"
      class="width-100"
      alt=""
    >
  </div>
</template>
<script>
export default {
  data() {
    return {
      page: []
    }
  },

  async created () {
    const { data } = await this.fetch('/page7.json')
    this.page = data
  },

  methods: {
  }
}
</script>
